<template>
  <a-drawer
    placement="right"
    :getContainer="false"
    wrapClassName="play-list"
    :maskStyle="{ backgroundColor: 'rgba(0,0,0,0)' }"
    :closable="false"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <p
      v-for="item in playList"
      :key="item.id"
      :style="currentSong.id === item.id ? 'color:red' : ''"
    >
      {{ item.name }}
    </p>
  </a-drawer>
</template>
<script>
export default {
  name: "PlayList",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    playList() {
      return this.$store.state.electronStore.playList;
    },
    currentSong() {
      return this.$store.state.electronStore.currentSong;
    }
  },
  methods: {
    onClose() {
      this.$emit("close");
    },
    afterVisibleChange() {}
  }
};
</script>
<style lang="less">
@import "./index.less";
</style>
